<template>
  <!-- 发起人模块 -->
  <div class="box">
    <el-popover
      ref="popover"
      placement="right"
      title="发起人"
      width="240"
      trigger="hover"
      popper-class="person_popover"
    >
      
      <p class="titTab">发起方式：</p>
      <p class="popText" v-if="info.auditType.length==0" >暂未选择</p>
      <p class="popText" v-else>{{info.auditType.join(',')}}</p>
      <p class="titTab">发起人员：</p>
      <p class="popText" v-if="info.userIdList.length>0"><span v-for="item in info.userIdList" :key="item.id">{{item.name}}&nbsp;&nbsp;</span></p>
      <p class="popText" v-else><span >暂未选择</span></p>
    </el-popover>
    <div class="ini_box" v-popover:popover :class='[stateClass]' @click="showDrawer()">
      <div class="title">{{info.name}}</div>
      <div class="cen">
        <div class="cenText" v-if='info.userIdList&&info.userIdList.length>0'>
            <p v-for='(item,index) in info.userIdList' :key='item.id' > 
              <span v-if="index<=1">{{item.name}}</span>
              <span v-if="info.userIdList.length>2&&index==0">,</span>
              <span v-if="info.userIdList.length>2&&index==1">......</span>
            </p>
          </div>
        <div class="cenText" v-if='!info.userIdList||info.userIdList.length==0' style='color:red'>
            请选择发起人
          </div>
        <div class="icon">
          <i class="el-icon-arrow-right"></i>
        </div>
      </div>
      
    </div>
    
    <add :nodeInfo='info'></add>
    <promoterDrawer :nodeInfo='info'></promoterDrawer>
  </div>
  
</template>

<script>
import add from '../addNode.vue' // 新增节点组件
import promoterDrawer from '@/components/drawer/promoterDrawer'
import { mapState, mapMutations } from 'vuex'
export default {
  components:{
    add,
    promoterDrawer
  },
  props:['info'],
  data(){
    return {
      cenText:[],
      drawer:false,
      stateClass:''
    }
  },
  computed:{
    ...mapState({
      dataList: state => state.dataList,
      overList: state => state.overList,
      OngoingList: state => state.OngoingList
    })
  },
  watch:{
    info: {
      handler(newVal){
        console.log(newVal,11111111)
      },
      deep: true
    }
  },
  mounted(){
    console.log(this.info,222222)
    if(this.OngoingList.indexOf(this.info.key+'')!=-1){
      this.stateClass = 'Ongoing'
    }else if(this.overList.indexOf(this.info.key+'')!=-1){
      this.stateClass = 'overClass'
    }else{
      this.stateClass = ''
    }
  },
  methods:{
    ...mapMutations([
        'setPromoter',
    ]),
    showDrawer(){
      this.setPromoter(true)
    }
  }
}
</script>

<style scoped>
.ini_box{
  width: 240px;
  height: 100px;
  border: 1px solid #ccc;
  margin: 0 auto;
  border-radius: 5px;
  overflow: hidden;
  cursor: pointer;
}
.ini_box:hover{
  border: 1px solid #1d9cf1;
}
.title{
  height: 30px;
  line-height: 30px;
  text-align: center;
  background: #4e82bd;
  color: #fff;
}
.cen{
  display: flex;
  align-items: center;
  height: 70px;
  line-height: 30px;
  padding: 5px;
  box-sizing: border-box;
  background: #fff;
  color: #222;
}
.cenText{
  width: 200px;
  display: flex;
}
.icon{
  width: 40px;
  text-align: center;
}
.Ongoing{
  border: 1px solid #47f11d !important;
  box-shadow: 0 0 10px #47f11d !important;
}
.overClass{
  filter:grayscale(100%);
}
.titTab{
  color: #1d9cf1;
  margin: 10px 0 ;
  font-size: 14px;
}
.popText{
  padding-left: 10px;
}
</style>